<template>
	<div class="text_group">
		<!-- 组件结构 -->
		
		
		<!-- 组件容器 -->
		<div class="input_group" :class="{'is-invalid':error}">
			<input :type="type" :value="value" :placeholder="placeholder"
			 :name="name" @input="$emit('input',$event.target.value)">
			 <!-- 输入框后面的那妞 -->
			 <button v-if="btnTitle" :disabled="disabled" @click="$emit('btnClick')">{{btnTitle}}</button>
			 <!-- 错误提醒 -->
		</div>
		<div v-if="error" class="invalid-feedback">{{error}}</div>
	</div>
</template>

<script>
	export default{
		props:{
			type:{
				type:String,
				default:"text"
			},
			value:String,
			type:String,
			placeholder:String,
			name:String,
			btnTitle:String,
			disabled:Boolean,
			error:String,
			
			
		}
	}
</script>

<style scoped="scoped">
	input{
		border: none;
	}
.input_group {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
   margin-top: 5px;
}
.input_group input {
  height: 100%;
  width: 60%;
  outline: none;
	
}
.input_group button {
  border: none;
  outline: none;
  background: #fff;
}
.input_group button[disabled] {
  color: #aaa;
}
.is-invalid {
  border: 1px solid red;
}
.invalid-feedback {
  color: red;
  padding-top: 5px;
	position: absolute;
	
}
</style>
